<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#d1{
				position: absolute;
				display: none;
				z-index: 2;
			}
			#d2{
				position: absolute;
				z-index: 2;
			}
		</style>
		
		<script>
			var b = false;// true代表显示 
			var tx,ty;
			var sum = 0;
			// 在随机的位置产生一个GIF的图片,并且将这个图片显示出来
			function randomGif(){(
				
			    tx=Math.floor(Math.random()*(window.innerWidth-100)));  //显示窗口的高度和宽度
				ty=Math.floor(Math.random()*(window.innerHeight-100));
				var obj = document.getElementById("d1");
				obj.style.top = ty + "px";
				obj.style.left = tx + "px";
			    obj.style.display="block";//将图片显示出来
				b = true;
				setTimeout("hideGif()",700);//1秒后消失
			}
			
			// 将图片消失
			function hideGif(){
				var obj = document.getElementById("d1");
				obj.style.display = "none";
				b = false;
				setTimeout("randomGif()",700);//1秒后出现
			}
			
			// 开枪
			function fire(){
				var f = document.getElementById("w1");
				f.play();//播放音乐
				// 判断是否打中
				var x = event.pageX;
				var y = event.pageY;
				if(b){
					if(x>tx&&x<(tx+240)&&y>ty&&y<(ty+240)){
						sum+=10;
						document.getElementById("s1").innerHTML = "击中";
						document.getElementById("s2").innerHTML = sum;
					}else{
						document.getElementById("s1").innerHTML = "未击中";
					}
				}else{
					document.getElementById("s1").innerHTML = "未击中";
				}
			}
			
			window.onclick = fire; // 实名函数调用
			window.onload = randomGif;
			
			window.onmousemove=function(e){
				var x = e.pageX;
				var y = e.pageY;
				var obj = document.getElementById("d2");
				obj.style.left = (x-100) + "px";
				obj.style.top = (y-100) + "px";
			}
			
		</script>
		
	</head>
	<body background="../img/2.jpg">
		<span id="s1"></span>
		<br />
		<span id="s2"></span>
		<audio src="../img/t1.wav" id="w1"></audio>
		<div id="d1">
			<img src="../img/t2.gif" />
		</div>
		<div id="d2" >
			<img src="../img/m.jpg" height="40"  width="40"/>
		</div>
	</body>
</html>
